<template>
  <div class="wrapper">
    <van-nav-bar safe-area-inset-top placeholder>
      <template #title>
        <van-col>
          <van-icon name="search" size="20" color="red" />
        </van-col>
        <van-col>刻印查询</van-col>
      </template>
    </van-nav-bar>

    <!-- 快速查询 -->
    <van-field is-link readonly label="快速查询" @click="quickSelectShow = true" />
    <engr-group-view :groupViewShow="quickSelectShow" v-on:close="quickSelectShow = false"
      v-on:select="onQuickSelect" />

    <!-- 词条预览 -->
    <van-field is-link readonly label="词条预览" @click="queryAllAffixView" />

    <!-- 条件查询 -->
    <van-collapse v-model="activeNames">
      <van-collapse-item title="手动筛选" name="1">
        <van-cell-group>
          <!-- 刻印名字-->
          <!-- <van-field v-model="nameValue" label="刻印名字" placeholder="输入某个字即可" /> -->

          <!-- 属性类型 -->
          <van-field v-model="paramValue" is-link readonly label="属性类型" placeholder="请选择属性类型"
            @click="paramSelectShow = true" />
          <van-popup v-model="paramSelectShow" round position="bottom">
            <van-cascader v-model="paramCascaderValue" title="请选择属性类型" :options="paramOptions"
              @close="paramSelectShow = false" @finish="onParamValueFinish" />
          </van-popup>

          <!-- 机制类型 -->
          <van-field v-model="resValue" is-link readonly label="机制类型" placeholder="请选择机制类型"
            @click="resSelectShow = true" />
          <van-popup v-model="resSelectShow" round position="bottom">
            <van-cascader v-model="resCascaderValue" title="请选择机制类型" :options="resOptions"
              @close="resSelectShow = false" @finish="onResValueFinish" />
          </van-popup>

          <!-- 刻印位置 -->
          <van-field v-model="locValue" is-link readonly label="刻印位置" placeholder="请选择刻印位置"
            @click="locSelectShow = true" />
          <van-popup v-model="locSelectShow" round position="bottom">
            <van-cascader v-model="locCascaderValue" title="请选择刻印位置" :options="locOptions"
              @close="locSelectShow = false" @finish="onLocValueFinish" />
          </van-popup>

        </van-cell-group>

      </van-collapse-item>
    </van-collapse>

    <!-- 查询结果 -->
    <div>
      <!-- 暂无数据提示 -->
      <van-row justify="center" v-show="(!rsLoadingShow && rs_list == null && !affixListShow)" :class="'nodata-word'">
        <van-col span="18" offset="3">
          <van-divider>暂无数据</van-divider>
        </van-col>
      </van-row>

      <!-- 结果-表头 -->
      <van-row v-if="!rsLoadingShow && rs_list != null" class="result-list-title">
        <van-col span="2" offset="1"></van-col>
        <van-col span="6">刻印名字</van-col>
        <van-col span="7" class="font-center">词条1</van-col>
        <van-col span="7" class="font-center">词条2</van-col>
      </van-row>

      <!-- 结果-list -->
      <div class="result-list-container" v-show="rs_list != null">
        <van-row class="result-list-row" @click="onClickResult(item)" v-for="(item) in rs_list">
          <van-col span="2" offset="1">
            <van-image width="40" height="40" :src="item.icon" />
          </van-col>
          <van-col span="7">&nbsp;{{ item.name }}{{ item.location }}</van-col>
          <van-col span="7" class="font-center">
            <van-button class="affix-button" plain :type="$options.filters.getButtonTypeByAffix(item.affix1)">{{ item.affix1 || "?" }}
            </van-button>
          </van-col>
          <van-col span="7" class="font-center">
            <van-button class="affix-button" plain :type="$options.filters.getButtonTypeByAffix(item.affix2)">{{ item.affix2 || "?" }}
            </van-button>
          </van-col>
        </van-row>
      </div>

      <!-- 词条预览-表头 -->
      <van-row v-if="affixListShow" class="result-list-title">
        <van-col span="6" offset="1">&nbsp;&nbsp;词条</van-col>
        <van-col>效果</van-col>
      </van-row>

      <!-- 词条预览-list -->
      <div class="result-list-container" v-show="affixListShow">

        <van-row class="result-list-row" v-if="affixList != null && affixList.length > 0" v-for="(item) in affixList">

          <van-col span="2" offset="1">
            <van-image class="margin-top-small" width="35" height="35" :src="item.icon" />
          </van-col>

          <van-col span="4">{{ item.name }}</van-col>

          <van-col span="17">{{ item.text | textlength }}</van-col>

        </van-row>

        <div v-if="affixList != null && affixList.length > 0" class="affix-list-lasttop-div"></div>
      </div>
    </div>

    <!-- 查询结果-详情弹出 -->
    <engr-view :engrViewShow="engrViewShow" :engrViewData="engrViewData" :affixOptions="affixOptions"
      :affixList="affixList" v-on:close="engrViewShow = false">
    </engr-view>
  </div>
</template>

<script>
import { SearchServer } from '../server/servers';
import EngrView from './popups/EngrView';
import EngrGroupView from './popups/EngrGroupView';

const btnTypeAffix = ['', 'danger', 'danger', 'info', 'warning'];
let vm;

export default {
  name: 'Search',

  components: {
    EngrView, EngrGroupView
  },

  beforeCreate() {
    vm = this;
  },

  computed: {
    affixList() {
      return this.$store.state.affixList;
    },

    affixOptions() {
      return this.$store.state.affixOptions;
    }
  },

  watch: {
    activeNames(val, old) {
      let htmlElement = Array.from(window.document.getElementsByClassName("result-list-container"));

      if (!htmlElement || htmlElement.length <= 0) {
        return;
      }

      if (!val || val[0] != '1') { //收起了
        htmlElement.some(e => {
          e.style.height = "529px";
        })

      } else { //展开了
        htmlElement.some(e => {
          e.style.height = "373px";
        })
      }
    }
  },

  filters: {
    textlength(data) {
      if (data != null && data != '' && data.length > 20)
        return data.substring(0, 19);

      return String(data);
    },
    getButtonTypeByAffix(data) {
      let type = 0;
      vm.affixList.some(e => {
        if (e.name == data) {
          type = e.type;
          return true;
        }
      })
      return btnTypeAffix[type];
    },
  },

  data() {
    return {
      rs_list: null,
      rsLoadingShow: false,

      activeNames: [],

      affixListShow: false,
      engrViewShow: false,
      engrViewData: {},

      nameValue: "",
      paramValue: "",
      resValue: "",
      locValue: "",

      quickSelectShow: false,
      paramSelectShow: false,
      resSelectShow: false,
      locSelectShow: false,

      paramCascaderValue: "",
      resCascaderValue: "",
      locCascaderValue: "",

      paramOptions: [
        {
          text: "任意",
          value: "",
        },
        {
          text: "光",
          value: "光",
        },
        {
          text: "暗",
          value: "暗",
        },
        {
          text: "雷",
          value: "雷",
        },
        {
          text: "火",
          value: "火",
        },
        {
          text: "冰",
          value: "冰",
        },
        {
          text: "水",
          value: "水",
        },
        {
          text: "风",
          value: "风",
        },

        {
          text: "物理",
          value: "物理",
        },
      ],

      resOptions: [
        {
          text: "任意",
          value: "",
        },
        {
          text: "能量",
          value: "能量",
        },
        {
          text: "怒气",
          value: "怒气",
        },
        {
          text: "神能",
          value: "神能",
        },
        {
          text: "印记",
          value: "印记",
        },
        {
          text: "通用",
          value: "通用",
        },
        {
          text: "过渡",
          value: "过渡",
        },
      ],

      locOptions: [
        {
          text: "任意",
          value: "",
        },
        {
          text: "1",
          value: "1",
        },
        {
          text: "2",
          value: "2",
        },
        {
          text: "3",
          value: "3",
        },
        {
          text: "4",
          value: "4",
        },
        {
          text: "5",
          value: "5",
        },
        {
          text: "6",
          value: "6",
        },
      ],


    }
  },

  methods: {

    getButtonByAffixType(val) {
      if (val <= 2) {
        return "danger";
      } else if (val == 3) {
        return "info";
      } else {
        return "warning";
      }
    },

    getResult(datas) {
      console.log("接到后端消息", datas);
      this.affixListShow = false;
      this.rs_list = datas;
    },

    queryAllAffixView() {
      this.clearCondition();
      this.rs_list = null;
      this.affixListShow = true;
    },

    clearCondition() {
      this.nameValue = "";
      this.paramValue = "";
      this.resValue = "";
      this.locValue = "";
    },

    toQuery() {
      let datas = SearchServer.query({
        name: this.nameValue,
        param: this.paramValue,
        res: this.resValue,
        location: this.locValue
      });

      this.getResult(datas);
    },

    getQucikOptions(event, datas) {
      this.quickItems = datas;
    },

    //快速查询 点击某个图标后
    onQuickSelect(item) {
      let name =
        this.activeNames = []; //关闭下拉
      this.clearCondition(); //清空条件

      let datas = SearchServer.query({ name: item.name });
      this.getResult(datas);
    },

    onParamValueFinish({ selectedOptions }) {
      this.paramSelectShow = false;
      this.paramValue = selectedOptions.map((option) => option.value);
      this.resValue = ""; //相斥条件
      this.resCascaderValue = "";
      this.toQuery();
    },

    onResValueFinish({ selectedOptions }) {
      this.resSelectShow = false;
      this.resValue = selectedOptions.map((option) => option.value);
      this.paramValue = "";//相斥条件
      this.paramCascaderValue = "";
      this.toQuery();
    },

    onLocValueFinish({ selectedOptions }) {
      this.locSelectShow = false;
      this.locValue = selectedOptions.map((option) => option.value);
      this.toQuery();
    },

    //点击查看某个刻印
    onClickResult(engr) {
      console.log("查询具体刻印", engr);
      this.engrViewData = engr;
      this.$nextTick().then(() => {
        this.engrViewShow = true;
      });
    },
  }
}
</script>

<style scoped>
.nodata-word {
  color: darkgray;
  text-align: center;
  height: 30px;
  line-height: 30px;
}

.van-field span {
  color: #323233;
}

.result-list-container {
  height: 529px;
  width: 499.5px;
  overflow-x: hidden;
  overflow-y: scroll;
}

.result-list-container .van-row {
  cursor: pointer;
}

.result-list-container .affix-button {
  width: 100px !important;
  height: 35px;
  margin: 0;
  position: relative;
  top: -5px;
}

.result-list-title {
  color: darkgray;
}

.result-list-row,
.result-list-title,
.result-list-row .van-col {
  height: 40px;
  line-height: 40px;
}

.result-list-row,
.result-list-title {
  border-bottom: 1px solid #ebedf0;
}
</style>